<template>
  <div class="details">
    <div class="headline">推广信息</div>

    <div class="matter" v-loading="loading">
      <div class="top">
        <div class="list" v-for="(item, index) in 9" :key="index">
          <div class="key">
            {{
              index == 0
                ? "店铺id"
                : index == 1
                ? "申请人id"
                : index == 2
                ? "店铺联系人"
                : index == 3
                ? "店铺联系方式"
                : index == 4
                ? "申请时间"
                : index == 5
                ? "上级店铺联系人"
                : index == 6
                ? "上级店铺联系方式"
                : index == 7
                ? "合同状态"
                : index == 8
                ? "审核时间"
                : ""
            }}:
          </div>
          <div class="value">
            {{
              index == 0
                ? detailsObj.shopId
                : index == 1
                ? detailsObj.userId
                : index == 2
                ? detailsObj.shopUserName
                : index == 3
                ? detailsObj.shopUserPhone
                : index == 4
                ? detailsObj.shopContractCreateTime
                : index == 5
                ? detailsObj.lastShopUserName
                : index == 6
                ? detailsObj.lastShopUserPhone
                : index == 7
                ? detailsObj.shopContractStatus == 0
                  ? "待审批"
                  : detailsObj.shopContractStatus == 1
                  ? "已通过"
                  : detailsObj.shopContractStatus == 2
                  ? "已否决"
                  : ""
                : index == 8
                ? detailsObj.shopContractAuditTime
                : ""
            }}
          </div>
        </div>
      </div>

       <div class="center">
        <div class="list">
          <div class="key">合同审批备注:</div>
          <div class="value">
            {{ detailsObj.shopContractBreak }}
          </div>
        </div>
      </div>

      <div class="center">
        <div class="list">
          <div class="key">合同文件地址:</div>
          <div class="value">
            {{ detailsObj.shopContractUrl }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { contractShopListId } from "@/api/contract";

export default {
  data() {
    return {
      id: "",
      detailsObj: {},
      loading: false
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.loading = true
    this.contractShopListIdMet();
  },
  methods: {
    //--------
    contractShopListIdMet() {
      let params = this.id;

      contractShopListId(params).then((res) => {
        if (res.errorCode == null) {
          this.detailsObj = res.resultData;
          this.loading = false
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.details {
  .headline {
    height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    background: #eef5fd;
    border-radius: 5px;
    display: flex;
    align-items: center;
  }

  .matter {
    margin-top: 20px;
    .top,
    .center,
    .bottom {
      display: flex;
      flex-wrap: wrap;

      .list {
        width: calc((100% / 4));
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        .value {
          margin-left: 10px;
        }
      }
    }

    .center {
      .list {
        width: 100%;
      }
    }

    .bottom {
      .list {
        width: 100%;
        align-items: baseline;

        .value {
          .block {
            margin-bottom: 10px;

            .title {
              font-weight: 600;
              margin-bottom: 10px;
            }

            .imgs {
              width: 50px;
              height: 50px;
              border: 1px solid;
            }
          }
        }
      }
    }

    .overview {
      .list {
        .key {
          margin-bottom: 10px;
        }

        .value {
          .block {
            margin-bottom: 20px;
            .title {
              font-weight: 600;
              margin-bottom: 10px;
            }

            .text {
              font-size: 400;
              color: rgba(0, 0, 0, 0.6);
            }
          }
        }
      }
    }
  }
}
</style>